<template>
    <div>
        <el-card>
            <h1>完善档案信息</h1>
            <span>居民信息</span>
            <el-form :model="residentInfoData">
                <el-row :gutter="30">
                    <el-col :span="8">
                        <el-form-item>
                            <span>居民编号 {{ residentInfoData._id }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="姓名" props="name">
                            <el-input v-model="residentInfoData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="居民头像">
                            <el-upload class="avatar-uploader" :action="`${baseURL}/images/upload`"
                                :show-file-list="false" :on-success="handleAvatar">
                                <img v-if="residentInfoData.avatar" :src="residentInfoData.avatar" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                            </el-upload>
                        </el-form-item>
                    </el-col>



                    <el-col :span="8">
                        <el-form-item label="身份证号" props="IDnumber">
                            <el-input v-model="residentInfoData.IDnumber" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="手机号码" props="phone">
                            <el-input v-model="residentInfoData.phone" placeholder="居民登录账号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="居民标签">
                            <el-select v-model="residentInfoData.tagIds" placeholder="请选择" clearable>
                                <el-option v-for="item in TagsData.rows" :key="item._id" :label="item.name"
                                    :value="item._id" />

                            </el-select>
                        </el-form-item>
                    </el-col>



                    <el-col :span="16">
                        <el-form-item label="现居地" props="address">
                            <el-input v-model="residentInfoData.address"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="行政区划">
                            <el-input v-model="residentInfoData.administrativeRegion"></el-input>
                        </el-form-item>
                    </el-col>



                    <el-col :span="16">
                        <el-form-item label="户籍地址">
                            <el-input v-model="residentInfoData.origin"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <!-- <el-form-item label="家庭成员">
                            <input type="text">
                        </el-form-item> -->
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="性别">
                            <el-select v-model="residentInfoData.gender" placeholder="请选择">
                                <el-option label="请选择" value="" />
                                <el-option label="男" value="0" />
                                <el-option label="女" value="1" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="出生年月">
                            <el-date-picker v-model="residentInfoData.birthday" type="date" value-format="YYYY-MM-DD"
                                placeholder="请选择日期" size="default" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="籍贯">
                            <el-input v-model="residentInfoData.origin"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="民族">
                            <el-input v-model="residentInfoData.nation"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="文化程度">
                            <el-input v-model="residentInfoData.culture"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="婚姻状况">
                            <el-input v-model="residentInfoData.maritalStatus"></el-input>
                        </el-form-item>
                    </el-col>


                    <el-col :span="8">
                        <el-form-item label="职业">
                            <el-input v-model="residentInfoData.perfession" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="工作单位">
                            <el-input v-model="residentInfoData.workUnit" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="紧急联系人">
                            <el-input placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系电话">
                            <el-input placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="登录密码" props="password">
                            <el-input v-model="residentInfoData.password" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>



                    <el-col :span="8">
                        <el-form-item label="户籍类型">
                            <el-input v-model="residentInfoData.domicileType" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="定点医疗单位">
                            <el-input v-model="residentInfoData.hospital" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-form-item label="费用类型">
                    <el-input v-model="residentInfoData.costType" placeholder="请输入"></el-input>
                </el-form-item> -->

                <h1>健康信息</h1>
                <el-row :gutter="30">
                    <el-col :span="8">
                        <el-form-item label="身高">
                            <el-input v-model="residentInfoData.height" placeholder="请输入">
                                <template #append>cm</template>
                            </el-input>

                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="体重">
                            <el-input v-model="residentInfoData.weight" placeholder="请输入">
                                <template #append>kg</template>
                            </el-input>

                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="血型">
                            <el-input v-model="residentInfoData.bloodType" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <el-form-item label="RH阴性">
                            <el-select v-model="residentInfoData.RH" placeholder="请选择" style="width: 200px;">
                                <el-option label="请选择" value="" />
                                <el-option label="否" value="0" />
                                <el-option label="是" value="1" />
                                <el-option label="不详" value="2" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="24">
                        <el-form-item label="过敏史">
                            <div style="display: flex;flex-direction: row;flex-wrap: nowrap;">
                                <div>
                                    <el-radio-group v-model="residentInfoData.allergy">
                                        <el-radio value="false">无</el-radio>
                                        <el-radio value="true">有</el-radio>
                                    </el-radio-group>
                                </div>
                                <el-input placeholder="请输入" v-model="residentInfoData.allergy"> </el-input>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="既往史">
                            <input type="text">
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="就诊史">
                            <input type="text">
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="家族病史">
                            <input type="text">
                        </el-form-item>
                     </el-col> -->
                </el-row>
                <el-button type="primary" @click="onSave">保存</el-button>
                <el-button @click="$router.back()">返回</el-button>

            </el-form>

        </el-card>
    </div>
</template>

<script setup>

import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getResidentsDetailApi, updateResidentsApi, updateResidentsAvatarApi } from '../../../api/residents';
import { useFindData } from '../../../composables/findData';
const { TagsData, findTagsAsync } = useFindData()

const baseURL = import.meta.env.VITE_BASE_URL
const route = useRoute();
const router = useRouter()
const residentInfoData = ref([])

onMounted(() => {
    findResidentInfo();
    findTagsAsync();
})

// 获取参数
async function findResidentInfo() {
    const response = await getResidentsDetailApi({ _id: route.query._id });
    if (response.code == 200) {
        residentInfoData.value = response.data;
        console.log(residentInfoData.value, '居民详情');
    }
}

function handleAvatar(response) {
    if (response.code == 200) {
        // console.log(response);
        residentInfoData.value.avatar = response.data
        // updateResidentsAvatarApi({
        //     _id:residentInfoData.value._id,
        //     file: response.data
        // }).then(res => {
        //     console.log(res);
        // })
    }


}
// 保存
function onSave() {
    // console.log(residentInfoData.value);
    updateResident();

}
// end保存

function updateResident() {
    updateResidentsApi({
        ...residentInfoData.value
    }).then(res => {
        if (res.code == 200) {
            router.back()
        }
    })
}
</script>

<style scoped lang="scss">
.avatar-uploader {
    width: 40px;
    height: 40px;
    text-align: center;
    cursor: pointer;

    .avatar {
        width: 100%;
        height: 100%;
        border-radius: 8px;
    }

    .el-icon.avatar-uploader-icon {
        font-size: 20px;
        color: #5f90d4;
        width: 60px;
        height: 60px;
        text-align: center;
    }

}
</style>